<template>
  <el-container>
    <el-aside width="400px">
      <div class="control-section">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        <!--            @click="fetchReport(button.name,button.tablenames,button.prompt,button.query);getSQL(data.button.name,data.button.tablenames,data.button.prompt);getReport(button.name)"-->

      </div>
    </el-aside>
    <el-container>
      <el-header style="height: 120px; display: flex; align-items: center;">
        <el-input type="textarea" :rows="5" v-model="Content" placeholder="prompt"
                  style="display: inline-block; width: 85%;"></el-input>
        <el-button round @click="handleNodeClick2" style="display: inline-block; width: 15%;">更新指令</el-button>
      </el-header>
      <el-main>
        <div class="report-section">

          <!--          <div id="app" class="chart-container" v-html="htmlCode"></div>-->
          <div>

            <el-dropdown split-button type="primary" style="margin-right: fill" @command="handleCommand">
              <span class="el-dropdown-link">
                报表形式
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="table">表格</el-dropdown-item>
                <el-dropdown-item command="pie">饼状图</el-dropdown-item>
                <el-dropdown-item command="bar">条状图</el-dropdown-item>
                <el-dropdown-item command="line" disabled>折线图</el-dropdown-item>
                <el-dropdown-item command="more" divided>更多···</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
          <div>
            <div v-show="reportType === 'table'">
              <el-table :data="reportData" style="width: 100%">
                <el-table-column label="年份" prop="YEAR"></el-table-column>
                <el-table-column label="急性肺血栓栓塞症(PTE)患者检查人数" prop="FZ"></el-table-column>
                <el-table-column label="急性肺血栓栓塞症(PTE)患者总数" prop="FM"></el-table-column>
                <el-table-column :label="quota_name" prop="VAR3"></el-table-column>
              </el-table>
            </div>
            <div v-show="reportType === 'pie'">
              <!-- 在这里放置饼状图的代码 -->
              <p>pie</p>
              <div id="chartPie" style="width: 600px;height: 600px; display: flex; align-items: center;"></div>
            </div>
            <div v-show="reportType === 'bar'">
              <!-- 在这里放置柱状图的代码 -->
              <div ref="chartContainer" style="width: 400px;height: 400px; display: flex; align-items: center;"></div>


            </div>

          </div>
          <!--          <el-image-->
          <!--              style=" width: 500px ;height: auto"-->
          <!--              :src="imageSrc"-->
          <!--              :fit="cover">-->
          <!--            <div slot="error" class="image-slot">-->
          <!--              <i class="el-icon-picture-outline"></i>-->
          <!--            </div>-->
          <!--          </el-image>-->

        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import {getAssistantVos, getVosReport, getVosSql, getVosCache} from '@/api/vos/vos';
import * as echarts from 'echarts';


export default {
  name: 'VosReport',
  components: {},
  data() {
    return {
      imageSrc: "",
      Content: '',
      defaultProps: {
        children: 'children',
        label: 'name',
        id: 'id',
        prompt: 'prompt',
        tablenames: 'tablenames',
        query: 'query',
        type: ''
      },
      data: [
        {
          label: '颈动脉支架置入术并发症发生率',
          tablenames: "CDR_EMR_PATIENT_VISIT,CDR_EMR_OPERATION,CDR_EMR_DIAG,DJYYPS_DICT_DETAIL,DJYYPS_DICT_CATALOG,DJYYPS_DICT_CATALOG_ZBML",
          prompt: '请根据上面的表结构根据下面的需求输出可以在Oracle数据库执行的查询语句该查询语句的含义是：使用两个公共表表达式（CTE）X和Y来提取符合特定条件的住院患者的统计信息。\n' +
              'CTE X：从CDR_EMR_PATIENT_VISIT（住院信息表）提取患者出院的年份（nf）和月份（yf）。计算符合特定条件的住院患者数量（fz），这些条件包括：\n' +
              '存在对应的CDR_EMR_OPERATION（患者手术信息表）记录，说明患者进行了手术。手术编码（CODE）存在于DJYYPS_DICT_DETAIL表中，并且字典目录ID (CATALOG_ID) 包含在DJYYPS_DICT_CATALOG表的选定记录中。\n' +
              '字典目录ID与指标编号ZB_ID为 （2.3.9.4.7） 的等级医院指标目录表DJYYPS_DICT_CATALOG_ZBML的记录匹配，且适用范围包括分子或通用（1或3），排除标志为0，且显示标志为1。在CDR_EMR_DIAG诊断表取患者的入院病情为"无"（IN_INSTANCE =  4 ），且诊断编号（DIAG_NO）匹配DJYYPS_DICT_DETAIL表中相应的记录。\n' +
              '患者的出院日期（DATETIME_OUT）不为空，且不等于入院日期（DATETIME_IN）。\n' +
              'CTE Y：类似于CTE X，但是统计适用范围为分母（2）或通用（3）的患者数量（fm）。最终的SELECT语句：合并CTE X和Y的数据，选择年份（nf）作为时间。\n' +
              '计算每个年份的总住院患者数量，VAR1为满足CTE X条件的患者数量，VAR2为满足CTE Y条件的患者数量。\n' +
              'VAR3是满足CTE X条件的患者数量占满足CTE Y条件的患者数量的百分比。如果VAR2为0，则VAR3显示为 0% ，否则按照百分比格式显示。\n' +
              '所有数据按照年份（nf）进行分组，并按年份排序。此查询语句的目的是生成一个报表，统计满足特定手术和诊断条件的患者的月度或年度数量，并计算这些患者数占相应分母条件患者数的百分比。这有助于了解在特定指标（例如，高级别手术）下的住院病例分布。',
          query: 'select * from CDR_EMR_PATIENT_VISIT',
          type: 'primary'
        }],
      reportData: [
        {"YEAR": "2020", "FZ": 0, "FM": 205, "VAR3": 0.0},
        {"YEAR": "2021", "FZ": 0, "FM": 295, "VAR3": 0.0},
        {"YEAR": "2022", "FZ": 17, "FM": 264, "VAR3": 6.44},
        {"YEAR": "2023", "FZ": 170, "FM": 282, "VAR3": 60.28}
      ],
      reportType: '',
      quota_name: ''


    };
  },


  created() {

    // 获取指标树形信息
    this.toTreeData()

  },

  mounted() {
    this.reportBar();
    this.reportPie();

  },

  methods: {
    handleNodeClick2() {
      console.log("更新指令··· ")
      console.log(this.Content)
    },
    handleCommand(command) {
      // this.$message('click on item ' + command);
      console.log(command)
      this.reportType = command
      if (command === 'pie') {
        this.reportPie()
      }


    },
    handleNodeClick(data) {
      if (!data.name.includes("章") && !data.name.includes("、")) {

        //查看存储在数据库中的报表结果的函数
        // this.getReport(data)
        this.quota_name = data.name
        //获得SQL的函数并储存在数据库中
        this.getSQL(data.name)

        //调用chatGpt助手生成报表并存储在数据库中的函数
        // this.fetchReport(data)

      }


    },
    errormsg(error) {
      this.$notify.error({
        title: '错误',
        position: 'bottom-right',
        message: error.message
      });
    },
    reportMsg(data) {
      const h = this.$createElement;

      this.$notify({
        title: 'VOS报表数据',
        message: h('i', {style: 'color: teal'}, data)
      });
    },
    getSQL(quota_name) {

      const vos_data = {"name": quota_name}
      console.log(vos_data)
      getVosSql(vos_data).then(value => {
        console.log(value.data)
        console.log(value.data.quota)
        this.Content = value.data.quota
        console.log(value.data.report_data)
        this.reportData = JSON.parse(value.data.report_data)


// 使用函数并传入返回数据中的data数组

        //弹出返回消息
        this.reportMsg("报表准备就绪·")
        // throw new Error('error!')
      }).catch(err => {
        // 可以捕获到了
        this.errormsg(err); // 弹出错误提示
        // console.error('Error fetching report:', error);
        this.reportData = {};
      })

    },

    getReport(data) {
      console.log(data.name)


        this.Content = data.prompt;
        const vos_data = {"name": data.name}
        console.log(vos_data)
        getVosReport(vos_data).then(value => {
          console.log(value)
// 使用函数并传入返回数据中的data数组

          if (value.data.uris.length === 0) {
            this.reportData = {}
          } else {
            this.reportData = value.data.uris[0].uri;
          }
          console.log("报表结果=====》\n")
          console.log(this.reportData)
          this.imageSrc = this.reportData;

          console.log(this.reportData)
          this.imageSrc = this.reportData;
          // throw new Error('error!')
        }).catch(err => {
          // 可以捕获到了
          this.errormsg(err); // 弹出错误提示
        });

    },

    fetchReport(data) {

        this.Content = data.prompt;
        console.log("tablenames ======" + data.tablenames)
        console.log("prompt ======" + data.prompt)
        const vos_data = {
          "name": data.label,
          "tablenames": data.tablenames,
          "content": data.prompt,
          "query": data.query
        }
        console.log(vos_data)
        getAssistantVos(vos_data).then(value => {
          console.log(value)
// 使用函数并传入返回数据中的data数组
          this.reportData = value.data.data[0].content[0].image_file.file_id;


          console.log(this.reportData)
          this.imageSrc = this.reportData;
          // throw new Error('error!')
        }).catch(err => {
          // 可以捕获到了
          this.errormsg(err); // 弹出错误提示
          // console.error('Error fetching report:', error);
          this.reportData = {};
        })


    },

    toTreeData() {
      getVosCache().then(value => {
        console.log(value.data.data)
        // this.data =  this.buildTree(value.data)
        this.data = value.data.data

      }).catch(err => {
        // 可以捕获到了
        this.errormsg(err); // 弹出错误提示
        // console.error('Error fetching report:', error);
        this.reportData = {};
      })
    },

    reportBar() {
      this.$nextTick(() => {
        const chartContainer = this.$refs.chartContainer;
        const chart = echarts.init(chartContainer);

        // 提取数据
        const labels = this.reportData.map(item => item.YEAR);
        const data = this.reportData.map(item => item.VAR3);

        // 配置图表选项
        const options = {
          title: {
            text: 'My Chart'
          },
          xAxis: {
            type: 'category',
            data: labels
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            type: 'bar',
            data: data
          }]
        };

        // 渲染图表
        chart.setOption(options);
      });
    },

    reportPie() {
      var chartDom = document.getElementById('chartPie');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: this.quota_name,
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.transformData(this.reportData)
          }
        ]
      };

      option && myChart.setOption(option);
    },
    transformData(data) {
      const transformedData = data.map(item => ({
        value: item.VAR3,
        name: item.YEAR
      }));
      return transformedData;
    },


  }
};
</script>

<style scoped>

.control-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}


</style>
